<template>
	<view class="myHandbag">
		<image class="myHandbag__userTop" src="/static/images/userTop.png"></image>
		<view class="myHandbag__userTitle"
			:style="{top: `${search.top}px`,height: `${search.height}px`,lineHeight: `${search.height}px`}">手袋</view>
		<view v-if="cartList.length==0" class="myHandbag__main"
			:style="{top: `${search.top + search.height}px`,height: `calc(100vh - ${search.height}px - ${search.top}px - 108rpx - 32rpx - 40rpx)`}">
			<image class="kong" src="/static/images/hanbbagkonIcon.png"></image>
		</view>
		<view v-else class="myHandbag__main"
			:style="{top: `${search.top + search.height}px`,height: `calc(100vh - ${search.height}px - ${search.top}px - 108rpx - 32rpx - 40rpx)`}">
			<!-- cartData -->
			<view v-for="(nowItem,nowIndex) in cartData" :key="nowIndex">
				<view class="myHandbag__cartDataBox" v-if="nowItem.length">
					<!-- <view class="myHandbag__chaAllIconBox" @click.stop="duilieRemoe(nowIndex)">
							<image src="/static/images/chaAllIcon.png"></image>
						</view> -->

					<view class="myHandbag__mainItem" @click.stop="selectDian(index,item.cartId)"
						v-for="(item,index) in nowItem" :key="index">

						<view class="myHandbag__mainItemImg01Box">
							<image class="myHandbag__mainItemImg01"
								:src="item.selected == 1 ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
							</image>
						</view>
						<view @click.stop="ff_previewImage(item.productImg)" class="myHandbag__mainItemImg02Box">
							<image :class="nowIndex ? 'myHandbag__mainItemImg04' : 'myHandbag__mainItemImg02'"
								:src="item.productImg"></image>
						</view>
						
						<view class="myHandbag__mainItemCenBox">
							<view class="myHandbag__chaAllIconBoxxx" @click.stop="ff_rovemArr(item.cartId)">
								<image src="/static/images/chaAllIcon.png"></image>
							</view>
							<p class="myHandbag__mainItemCenBoxTxet">{{item.skuName}}</p>
							<view class="myHandbag__mainItemCenBoxJjie">
								<view class="myHandbag__mainItemCenBoxJjieBBOX">
									<span>¥</span>
									<span>{{item.totalPrice}}</span>
								</view>
								<view class="myHandbag__mainItemCenBoxJjieMain">
									<image @click.stop="mallCartWxNum(item.cartId,item.goodsNum,'jdd',index)"
										class="myHandbag__mainItemCenBoxJjieMainImg01"
										src="/static/images/JiangIcon.png">
									</image>
									<view @click.stop="" class="nowinput">{{item.goodsNum}}</view>
									<image @click.stop="mallCartWxNum(item.cartId,item.goodsNum,'add',index)"
										class="myHandbag__mainItemCenBoxJjieMainImg02" src="/static/images/JiaIcon.png">
									</image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>

		</view>

<!-- 添加成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>移除成功</span>
			</view>
		</u-overlay>
		<!-- 删除购物车-单个-->
		<u-overlay :show="isShow" @click="isShow = false">
			<view @click.stop="" class="warp">
				<view class="warpText">{{content}}</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="isShow = false">取消</span>
					<span class="warpButtomYes" @click.stop="confirm">确定</span>
				</view>
			</view>
		</u-overlay>
		<!-- 删除购物车-区域-->
		<u-overlay :show="isShowQuYu" @click="isShowQuYu = false">
			<view @click.stop="" class="warp">
				<view class="warpText">确定将此清单移除购物袋</view>
				<view class="warpButtom">
					<span class="warpButtomQx" @click.stop="isShowQuYu = false">取消</span>
					<span class="warpButtomYes" @click.stop="confirmQuYu">确定</span>
				</view>
			</view>
		</u-overlay>

		<view class="myHandbag__mainButtom" v-if="cartList.length!=0">
			<view class="myHandbag__mainButtomeft" @click.stop="allInn">
				<image class="myHandbag__mainButtomeftIcon"
					:src="allIn ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'"></image>
				<span>全选</span>
				<view class="myHandbag__mainButtomBBtox">
					<span class="myHandbag__mainButtomBBtoxLeft">合计:</span>
					<view class="myHandbag__mainButtomBBtoxRight">
						<span>¥</span>
						<span>{{totalPrice}}</span>
					</view>
				</view>
			</view>
			<view @click.stop="goPath" class="myHandbag__mainButtomRight">
				
				<view>结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				cartList: [],
				cartData: [],
				totalPrice: 0,
				isShow: false,
				title: '提示',
				content: '是否将商品移出手袋',
				isRemoveList: [],
				isShowQuYu: false,
				isShowDui: false
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
		},
		onShow() {
			this.initCat();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},
			allIn() {
				let isTrue = true
				for (let i = 0; i < this.cartList.length; i++) {
					let item = this.cartList[i];
					if (item.selected == 0) {
						isTrue = false;
					}
				}
				return isTrue
			}

		},
		methods: {
			goPath() {
				if (!this.totalPrice) {
					uni.showToast({
						icon: 'none',
						title: '请选择手表',
						mask: true
					})
					return
				}
				let bagObj = {
					buyType: 2
				}
				uni.navigateTo({
					url: `/package/orderForm/index?bagObj=${JSON.stringify(bagObj)}`
				})
			},
			allInn() {
				let cartId = this.allIn ? -1 : 0;

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxSelected({
					cartId
				}).then(res => {
					// debugger
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true
					})
					// this.allIn = !this.allIn
					let nowCartList = JSON.parse(JSON.stringify(this.cartList));
					nowCartList.forEach(item => {
						item.selected = this.allIn ? 0 : 1;
					})
					this.cartList = JSON.parse(JSON.stringify(nowCartList));
					this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];
					this.totalPrice = res.data.totalPrice;
				})


			},
			ff_rovemArr(cartId){
				let isRemoveList = [];
				this.isShow = true;
				this.isRemoveList.push(cartId);
			},
			//调用预览图片的方法
			ff_previewImage(myImgs, index = 0) {
				uni.previewImage({
					urls: [myImgs],
					current: index
				})
			},
			selectDian(index, cartId) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxSelected({
					cartId
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true
					})
					this.totalPrice = res.data.totalPrice;
					let nowCartList = JSON.parse(JSON.stringify(this.cartList));
					nowCartList[index].selected = nowCartList[index].selected == 0 ? 1 : 0;
					this.cartList = JSON.parse(JSON.stringify(nowCartList));
					this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];

				})

			},
			confirm() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxRemove(this.isRemoveList).then(res => {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: res.msg,
					// 	mask: true
					// })
					this.isShowDui = true;
					this.isShow = false;
					this.cartList = res.data.cartList;
					this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];
					this.totalPrice = res.data.totalPrice;
					setTimeout(()=>{
						this.isShowDui=false;
					},1000)
				})


			},
			duilieRemoe(index) {
				this.isRemoveList = [];
				this.cartData[index].forEach(item => {
					this.isRemoveList.push(item.cartId)
				})
				this.isShowQuYu = true;
			},
			confirmQuYu() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxRemove(this.isRemoveList).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						mask: true
					})
					this.isShowQuYu = false;
					this.cartList = res.data.cartList;
					this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];
					this.totalPrice = res.data.totalPrice;
				})


			},
			cancel() {
				this.isShow = false;
			},
			mallCartWxNum(cartId, goodsNum, type, index) {
				let nowGoodsNum = goodsNum;
				if (type == 'jdd') {
					nowGoodsNum = goodsNum - 1 <= 0 ? 0 : goodsNum - 1;
					if (nowGoodsNum == 0) {
						let isRemoveList = [];
						this.isShow = true;
						this.isRemoveList.push(cartId)
						return
					}
				} else if (type == 'add') {
					nowGoodsNum = goodsNum + 1;
				} else if (type == 'num') {
					nowGoodsNum = goodsNum;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.mallCartWxNum({
					cartId,
					goodsNum: nowGoodsNum
				}).then(res => {
					if (res.code == 200) {
						// console.log('res---->', res)
						this.cartList = res.data.cartList;
						this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];
						this.totalPrice = res.data.totalPrice
					} else if (res.code == 503) {
						// let newCartList = JSON.parse(JSON.stringify(this.cartList)); 
						let myMsy = res.msg;

						// str.match(reg)
						if (res.msg == '购买数量不能小于0') {
							uni.hideToast()
							let isRemoveList = [];
							this.isShow = true;
							this.isRemoveList.push(cartId);
							// newCartList[index].goodsNum = 1;

						} else if (myMsy.search('库存不足') != -1) {

							// newCartList[index].goodsNum = myMsy.split('：')[1];

						}
						// this.cartList = JSON.parse(JSON.stringify(newCartList)); 
						this.initCat();
					}

				})

			},
			initCat() {
				this.$api.mallCartWxList().then(res => {
					this.totalPrice = res.data.totalPrice;
					this.cartList = res.data.cartList;
					this.cartData = res.data.cartData ? [res.data.cartData[20], res.data.cartData[10]] : [];
					console.log('this.cartData>', this.cartData)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myHandbag {
		position: relative;
		height: 100vh;
		background-color: #F7F8FC;

		/deep/.u-modal__content {
			text-align: center !important;
		}

		.myHandbag__mainItemCenBoxTxet {

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			height: 60rpx;
			font-weight: bold;
		}

		.myHandbag__userTop {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.kong {
			width: 408rpx;
			height: 408rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.myHandbag__userTitle {
			position: absolute;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			font-weight: bold;
			color: #000000;
		}
		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}

		.warp {
			width: 70%;
			height: 210rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%);
		}

		.warpText {
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #2B2B33;
			width: 100%;
			padding: 40rpx 0;
		}

		.warpButtom {
			display: flex;

			span {
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #F0414D;
				border-top: 3rpx solid #F0F2F8;
				box-sizing: border-box;
			}

			span:nth-child(1) {
				border-right: 3rpx solid #F0F2F8;
				color: #B0B1BB;
			}
		}

		.myHandbag__cartDataBox {
			position: relative;
			background: #fff;
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;
		}

		.myHandbag__chaAllIconBox {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: 14rpx;
			right: 14rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9;

			image {
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.myHandbag__main {
			position: fixed;
			width: 100%;
			padding: 0 32rpx;
			margin: 20rpx 0;
			box-sizing: border-box;
			flex-wrap: wrap;
			overflow: scroll;
		}

		.myHandbag__mainItem {
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			height: 136rpx;
			box-sizing: border-box;
			// padding: 32rpx;
			width: 100%;
			margin-bottom: 24rpx;
		}

		.myHandbag__mainItem:last-child {
			margin-bottom: 0;
		}

		.myHandbag__mainItemImg01Box {
			flex: 0 0 44rpx;
		}

		.myHandbag__mainItemImg01 {
			width: 36rpx;
			height: 36rpx;
		}

		.myHandbag__mainItemImg02Box {
			flex: 0 0 136rpx;
			width: 136rpx;
			height: 136rpx;
			padding: 24rpx;
			background: #f7f8fc;
			box-sizing: border-box;
			border-radius: 40rpx;
			margin: 0 24rpx;
			position: relative;
			overflow: hidden;

		}

		.myHandbag__mainItemImg02 {
			width: 92rpx;
			height: 92rpx;
		}

		.myHandbag__mainItemImg04 {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
		}

		.myHandbag__mainItemCenBoxJjieMain {
			height: 48rpx;
			display: flex;
			border-radius: 32rpx;
			// background-color: #F7F8FC;

			.nowinput {
				display: inline-block;
				height: 56rpx !important;
				font-size: 30rpx !important;
				font-family: DIN;
				font-weight: normal;
				line-height: 56rpx !important;
				padding: 0 12rpx;
				color: #2B2B33 !important;
				width: 45rpx;
				text-align: center;
			}
		}

		.myHandbag__mainItemCenBoxJjieMainImg01 {
			width: 48rpx;
			height: 48rpx;
		}

		.myHandbag__mainItemCenBoxJjieMainImg02 {
			width: 48rpx;
			height: 48rpx;
		}

		.myHandbag__mainItemCenBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			padding: 15rpx 0 0rpx;
			box-sizing: border-box;
			overflow: hidden;
			position: relative;



			p {
				width: 91%;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				color: #2B2B33;
				opacity: 1;
			}
		}
		.myHandbag__chaAllIconBoxxx{
			    width: 56rpx;
			    height: 56rpx;
			    position: absolute;
			    top: 0rpx;
			    right: 0rpx;
			    display: flex;
			    /* display: flex; */
			    justify-content: center;
			    align-items: center;
			    z-index: 9;
			
			image {
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
			}
		}

		.myHandbag__mainItemCenBoxJjie {
			display: flex;
			justify-content: space-between;
			height: 56rpx;
			align-items: center;


		}

		.myHandbag__mainItemCenBoxJjieBBOX {
			span:nth-child(1) {
				font-size: 22rpx;
				font-family: 'DIN';
				font-weight: bold;
				color: #2B2B33;
				opacity: 1;
			}

			span:nth-child(2) {
				font-size: 32rpx;
				font-family: 'DIN';
				font-weight: bold;
				color: #2B2B33;
				opacity: 1;
			}
		}

		.myHandbag__mainButtom {
			    width: 100%;
			    height: 140rpx;
			    background: rgba(255, 255, 255, 0.39);
			    opacity: 1;
			    /* border-radius: 40rpx; */
			    position: fixed;
			    bottom: 0rpx;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			    padding: 24rpx 32rpx;
			    box-sizing: border-box;
			    /* margin: 0 32rpx; */
			    background-color: #FFFFFF;

			.myHandbag__mainButtomeftIcon {
				width: 36rpx;
				height: 36rpx;
			}
			// <view class="myHandbag__mainButtomBBtox">
			// 	<span class="myHandbag__mainButtomBBtoxLeft">合计</span>
			// 	<view class="myHandbag__mainButtomBBtoxRight">
			// 		<span>¥</span>
			// 		<span>{{totalPrice}}</span>
			// 	</view>
			// </view>
			.myHandbag__mainButtomBBtox{
				display: flex;
				margin-left: 32rpx;
				span{
					display: inline-block;
				}
			}
			.myHandbag__mainButtomBBtoxLeft{
				width: 60rpx;
				height: 48rpx !important;
				font-size: 26rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 54rpx !important;
				margin: 0 !important;
				color: #2B2B33;
			}
			.myHandbag__mainButtomBBtoxRight{
				span:nth-child(1){
					width: 16rpx;
					height: 48rpx;
					font-size: 26rpx;
					font-family: 蘋方-簡;
					font-weight: normal;
					line-height: 48rpx;
					color: #2B2B33;
					margin: 0 !important;
				}
				span:nth-child(2){
				width: 86rpx;
				height: 48rpx;
				font-size: 40rpx;
				font-family: DIN;
				font-weight: bold;
				line-height: 48rpx;
				color: #2B2B33;
				opacity: 1;
				margin: 0;
				}
			}

			.myHandbag__mainButtomeft {
				display: flex;
				align-items: center;

				span {
					    display: inline-block;
					    line-height: 22px;
					    height: 44rpx;
					    font-size: 26rpx;
					    font-family: 蘋方-簡;
					    font-weight: bold;
					    color: #2B2B33;
					    margin-left: 8rpx;
				}
			}

			.myHandbag__mainButtomRight {
				display: flex;
				align-items: center;

			
				view:nth-child(1) {
					width: 240rpx;
					height: 92rpx;
					line-height: 92rpx;
					background: #EF4455;
					opacity: 1;
					border-radius: 40rpx;
					font-size: 32rpx;
					font-family: 蘋方-簡;
					color: #FFFFFF;
					text-align: center;
					margin-left: 18rpx;
					box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
				}

			}
		}
	}
</style>
